<template>
    <div class="home">
        <!-- <keep-alive> -->
            <transition :name="transitionName">
                <router-view class="homeView"></router-view>
            </transition>
        <!-- </keep-alive> -->

        <van-tabbar v-model="active" inactive-color="#a5aeb7" active-color="#0099ff" placeholder  z-index="999">
            <van-tabbar-item @click="handleItemClick">
                <span>文件</span>
                <template #icon="props">
                    <van-image width="22" height="22" fit="contain" :src="props.active ? icon1.active : icon1.inactive" alt="文件" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item  @click="handleItemClick">
                <span>收藏</span>
                <template #icon="props">
                    <van-image width="22" height="22" fit="contain" :src="props.active ? icon3.active : icon3.inactive" alt="收藏" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item  @click="handleItemClick">
                <span>分享</span>
                <template #icon="props">
                    <van-image width="22" height="22" fit="contain" :src="props.active ? icon4.active : icon4.inactive" alt="分享" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item  @click="handleItemClick">
                <span>知识库</span>
                <template #icon="props">
                    <van-image width="22" height="22" fit="contain" :src="props.active ? icon2.active : icon2.inactive" alt="知识库" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item  @click="handleItemClick">
                <span>我的</span>
                <template #icon="props">
                    <van-image width="22" height="22" fit="contain" :src="props.active ? icon5.active : icon5.inactive" alt="我的" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'home',
    data(){
        return {
            transitionName: "slide-left",
            active: 0,
            icon1: {
                active: require('assets/images/document-0.png'),
                inactive: require('assets/images/document.png')
            },
            icon2: {
                active: require('assets/images/knowledge-0.png'),
                inactive: require('assets/images/knowledge.png')
            },
            icon3: {
                active: require('assets/images/collection-0.png'),
                inactive: require('assets/images/collection.png')
            },
            icon4: {
                active: require('assets/images/share-0.png'),
                inactive: require('assets/images/share.png')
            },
            icon5: {
                active: require('assets/images/my-0.png'),
                inactive: require('assets/images/my.png')
            }
        }
    },
    mounted(){
        
        this.handleTabbarActive()
    },
    // beforeRouteUpdate(to, from, next) {
    //     let isBack = this.$router.isBack;
    //     // console.log(this.$router.isBack)
    //     if (isBack) {
    //     this.transitionName = "slide-right";
    //     } else {
    //     this.transitionName = "slide-left";
    //     }
    //     this.$router.isBack = false;
    //     next();
    // },
    methods: {
        // 监听当前页面刷新，tabbar选中
        handleTabbarActive(){
            // console.log(this.active)
            console.log(this.$route.matched)
            let matchedArr = this.$route.matched
            let flag
            // 文件
            if(
                flag = matchedArr.find(item => {
                    return item.name == "DocumentManage"
                }) ? true : false
            ){
                this.active = 0
            }
            // 知识库
            if(
                flag = matchedArr.find(item => {
                    return item.name == "KnowledgeTree"
                }) ? true : false
            ){
                this.active = 3
            }
            // 收藏
            if(
                flag = matchedArr.find(item => {
                    return item.name == "FavouriteTree"
                }) ? true : false
            ){
                this.active = 1
            }
            // 分享
            if(
                flag = matchedArr.find(item => {
                    return item.name == "ShareView"
                }) ? true : false
            ){
                this.active = 2
            }
            // 我的
            if(
                flag = matchedArr.find(item => {
                    return item.name == "MyView"
                }) ? true : false
            ){
                this.active = 4
            }

        },
        // 监听tabbar改变事件
        handleTabbarChange(active){
            // console.log(active)
            switch(active){
                case 0:
                    this.$router.replace({path: '/DocumentManage'})
                    break;
                case 3:
                    this.$router.replace({path: '/KnowledgeTree'})
                    break;
                case 1:
                    this.$router.replace({path: '/FavouriteTreeMenu'})
                    break;
                case 2:
                    this.$router.replace({path: '/Share'})
                    break;
                case 4:
                    this.$router.replace({path: '/My'})
                    break;
            }
        },
        // tabbar点击事件
        handleItemClick(){
            // console.log(this.active)
            switch(this.active){
                case 0:
                    this.$router.replace({path: '/DocumentManage'})
                    break;
                case 3:
                    this.$router.replace({path: '/KnowledgeTree'})
                    break;
                case 1:
                    this.$router.replace({path: '/FavouriteTreeMenu'})
                    break;
                case 2:
                    this.$router.replace({path: '/Share'})
                    break;
                case 4:
                    this.$router.replace({path: '/My'})
                    break;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.home /deep/ .van-tabbar{
  height: 49px;
}
.home /deep/ .van-tabbar-item__icon{
    margin-bottom: 0;
}
.home /deep/ .van-tabbar-item__text span{
    display: block;
    font-size: 12px;
    // transform: scale(.75);
    // transform-origin: top;
}

.home{
    height: 100%;
    position: relative;
}
</style>